<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #root button {
            padding: 5px;
            margin: 5px;
        }

        #root button.active {
            background: red;
        }

        #root div {
            width: 500px;
            height: 300px;
            border: 1px solid green;
        }
    </style>
</head>
<body>
<div id="root">
    <button>中国</button>
    <button>日本</button>
    <button>韩国</button>
    <div>中国新闻</div>
    <div>日本新闻</div>
    <div>韩国</div>
</div>
</body>
<script>
    function Tag() {
        const root = document.querySelector("#root");
        this.btns = root.querySelectorAll("button");
        this.divs = root.querySelectorAll("div");
        this.activeI = 0;
        this.init();
    }

    Object.assign(Tag.prototype, {
        init() {
            for (let i = 0; i < this.btns.length; i++) {
                this.hide(i);
                this.btns[i].onclick = function () {
                    if (i === this.activeI) return;
                    this.hide();
                    this.activeI = i;
                    this.show();
                }.bind(this)
            }
            this.show();
        },
        show() {
            this.btns[this.activeI].className = "active";
            this.divs[this.activeI].style.display = "block";
        },
        hide(i=this.activeI) {
            this.btns[i].className = null;
            this.divs[i].style.display = "none";
        }
    });
    new Tag();
</script>
</html>